<template>
	<!-- 签名横屏 -->
	<view class="signa">

		<view class="bottomBox">
			<view class="tip">请您在此手动签写自己的姓名，签写操作完毕请点击保存按钮 !</view>
			<button class="btn blue"
				style="margin-top: 20rpx; width: 195rpx; height: 100rpx; line-height: 100rpx; font-size: 35rpx; position: absolute; z-index: 9999; border-radius: 100rpx;"
				@click="save">保存</button>
			<view class="btn" style="margin-top: 150rpx;" @click="clear">清除</view>
			<view class="btn" @click="cancel">取消</view>
		</view>

		<view class="qianming">
			<view class="mingzi"
				:style="{'width': name.width, 'height': name.height, 'fontSize': name.size, 'marginTop': name.top}">
				{{user.chinaname}}
			</view>
			<!--  @touchend="end" -->
			<canvas class="canvas gui-box-shadow" disable-scroll="true" :style="{'width':width,'height':height}"
				canvas-id="designature" @touchstart="starts" @touchmove="moves"></canvas>
		</view>

		<gui-popup ref="guijzz" :canCloseByShade="false">
			<view class="tanchuang">
				加载中...
			</view>
		</gui-popup>

		<gui-popup ref="guiqmcg" :canCloseByShade="false">
			<view class="tanchuang">
				签名成功
			</view>
		</gui-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:false,
				user: [],
				resultUrl: '',
				dom: null,
				line: [],
				width: '0px',
				height: '0px',
				radius: 0,
				qm_img: null,
				// 用户名字样式
				name: {
					width: '1100rpx',
					height: '450rpx',
					size: '250rpx',
					top: '350rpx',
				},
				signatureOrNot: null,
				// 判断是否是会员证跳转过来的
				list: null
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					this.width = res.windowWidth - 56 + 'px';
					this.height = res.windowHeight - 180 + 'px';
				}
			});
			this.dom = uni.createCanvasContext('designature', this);
		},
		onLoad(opt) {
			this.list = opt.list
			// console.log('idx: ', this.list);
			this.user = uni.getStorageSync("member");
			console.log(this.user, 'user');
			// this.user.chinaname = '柳江'
			// console.log(this.user.chinaname.length, '名字长度');
			if (this.user.chinaname.length === 2) {
				let mz = this.user.chinaname[0] + ' ' + this.user.chinaname[1]
				this.user.chinaname = mz
				this.name.size = '280rpx';
				this.name.top = '560rpx';
			} else if (this.user.chinaname.length === 4) {
				this.name.width = '1200rpx';
				this.name.height = '200rpx';
				this.name.size = '225rpx';
				this.name.top = '580rpx';
			}

			if (!this.user) {
				uni.showToast({
					title: '未获取到用户信息',
					duration: 2000,
					icon: 'error'
				});
			}
		},
		methods: {
			cancel() {
				uni.navigateBack()
			},
			open() {
				this.$refs.guiqmcg.open();
				setTimeout(() => {
					this.$refs.guiqmcg.close();
				}, 500);
			},
			open1() {
				this.$refs.guijzz.open();
			},
			close1() {
				this.$refs.guijzz.close();
			},
			distance(a, b) {
				let x = b.x - a.x;
				let y = b.y - a.y;
				return Math.sqrt(x * x + y * y);
			},
			starts(e) {
				// console.log(e)
				this.line.push({
					points: [{
						time: new Date().getTime(),
						x: e.touches[0].x,
						y: e.touches[0].y,
						dis: 0
					}]
				})
				let currentPoint = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.currentPoint = currentPoint
				this.drawer(this.line[this.line.length - 1])
			},
			moves(e) {
				// console.log(e)
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				this.lastPoint = this.currentPoint,
					this.currentPoint = point
				this.line[this.line.length - 1].points.push({
					time: new Date().getTime(),
					x: e.touches[0].x,
					y: e.touches[0].y,
					dis: this.distance(this.currentPoint, this.lastPoint)
				})
				this.signatureOrNot = 1
				// console.log('moves-signatureOrNot', this.signatureOrNot);
				this.drawer(this.line[this.line.length - 1])
			},
			drawer(item) {
				let x1, x2, y1, y2, len, radius, r, cx, cy, t = 0.5,
					x, y;
				var time = 0;
				if (item.points.length > 2) {
					let lines = item.points[item.points.length - 3];
					let line = item.points[item.points.length - 2];
					let end = item.points[item.points.length - 1];
					x = line.x;
					y = line.y;
					x1 = lines.x;
					y1 = lines.y;
					x2 = end.x;
					y2 = end.y;
					var dis = 0;
					time = (line.time - lines.time) + (end.time - line.time)
					dis = line.dis + lines.dis + end.dis;
					var dom = this.dom;
					var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax);
					cx = (x - (Math.pow(1 - t, 2) * x1) - Math.pow(t, 2) * x2) / (2 * t * (1 - t))
					cy = (y - (Math.pow(1 - t, 2) * y1) - Math.pow(t, 2) * y2) / (2 * t * (1 - t))
					dom.setLineCap('round')
					dom.beginPath();
					dom.setStrokeStyle('black')
					dom.setLineWidth(5)
					dom.moveTo(x1, y1);
					dom.quadraticCurveTo(cx, cy, x2, y2);

					dom.stroke();
					dom.draw(true)
				}
			},
			clear() {
				this.signatureOrNot = null
				this.dom.clearRect(0, 0, 1000, 1000)
				this.dom.draw()
			},
			save() {
				var self = this;
				// console.log(555)
				if(self.signatureOrNot == null) {
					uni.showToast({
						title: '您未签名',
						duration: 3000,
						icon: 'error'
					});
					return
				}
				self.open1();
				uni.canvasToTempFilePath({
					canvasId: 'designature',
					fileType: 'png',
					quality: 1, //图片质量
					success: function(res) {
						console.log("save->canvasToTempFilePath",res);
						// self.qm_img = res.tempFilePath

						// console.log('qianming1: ', self.qm_img);
						

						// #ifdef H5
							self.qm_img=res.tempFilePath;
							self.upload_qm()
						// #endif
						
						// #ifdef APP-PLUS
						var savedFilePath = res.tempFilePath; //相对路径
						var path = plus.io.convertLocalFileSystemURL(savedFilePath); //绝对路径
						var fileReader = new plus.io.FileReader();
						fileReader.readAsDataURL(path);
						fileReader.onloadend = function(evt) { //读取文件成功完成的回调函数
							self.qm_img = evt.target.result
							// console.log(evt.target.result);
							console.log('qianming1: ', self.qm_img);
							self.upload_qm()
						}
						// #endif
						
						
					},
					fail(e) {
						console.log(e)
					}
				}, this)
			},
			upload_qm() {
				let self = this;
				let qm_img = btoa(self.qm_img)
				console.log('qianming: ', qm_img);
				
				if(this.loading) return;
				this.loading=true;
				this.$boya.NPost("/app/user_vip/update_sign", {
					sign: qm_img, //base64用户签名
					// member_id: self.user.id //用户id
				}, function(res) {
					console.log('res: ', res);
					self.close1();
					self.loading=false;
					if (res.code == 200) {
						console.log('res: ', res);
						self.open();
						setTimeout(function(){
							uni.navigateBack()
						},2000);
						// window.history.go(-1)
						// setTimeout(() => {
						// 	uni.reLaunch({
						// 		url: "/pages/switchPages/main?p=index"
						// 	})
						// }, 500);
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				},function(err){
					uni.showToast({
						title:res.msg,
						icon:"error"
					})
					self.loading=false;
					self.close1();
				})
				// } else {
				// 	self.tip_text = "签名上传失败,请重试";
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '未签名'
				// 	});
				// }
			}
		}
	}
</script>

<style scoped lang="scss">
	.signa {
		// position: relative;
		// overflow: hidden;
		background-color: #fff;
		width: 100vw;
		height: 100vh;
		padding-bottom: 100rpx;

		.box {
			// height: 100vh;
			// background-color: #fff;
			border-radius: 20rpx;
			// padding: 12px 12px 100px;
			box-shadow: 0 6rpx 42rpx rgba(0, 0, 0, 0.05);
		}

		.mingzi {
			// 类似手写风格的字体
			font-family: cursive;
			color: gainsboro;
			line-height: 750rpx;
			transform: rotate(90deg);
			position: absolute;
			z-index: 99;
		}

		.canvas {
			// rgba(255, 255, 255, 0.5) #E6E6E6;
			// background-color: rgba(255, 255, 255, 0.5);
			// background: url('../../static/zhongqiu/bj2.jpg') 100% 100% / 100% 100%;
			// transform: rotate(-90deg);
			position: relative;
			z-index: 999;
		}

		.bottomBox {
			// flex-direction: column;
			// justify-content: center;
			width: 200rpx;
			height: 500rpx;
			// padding: 10px;
			// background-color: #007AFF;
			// position: fixed;
			// top: -150rpx;
			transform: rotate(90deg);
			margin-top: -100rpx;
			margin-left: 300rpx;

			.tip {
				font-size: 24rpx;
				color: #FF6F77;
			}

			.btn {
				width: 100%;
				height: 80rpx;
				background: #F5F5F5;
				border-radius: 40rpx;
				margin-top: 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: #333333;
				font-size: 13px;

				&.blue {
					background: #284CF4;
					color: #fff;
				}
			}
		}
	}

	.qianming {
		margin-top: -100rpx;
		margin-left: 50rpx;
	}

	.tanchuang {
		transform: rotate(90deg);
		width: 250rpx;
		height: 200rpx;
		color: white;
		font-size: 45rpx;
		font-weight: bold;
		text-align: center;
		line-height: 200rpx;
		// background-color: rgba(0, 0, 0, 0.3);
		border-radius: 20rpx;
		margin: 0 auto;
	}
</style>